<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/newcj/fonts/iconfont.css?v=2016070717">
    <script src="__STATIC__/newcj/js/jquery.min2.js"></script>
    <script src="__STATIC__/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="__STATIC__/newcj/js/dist/flexible/flexible.debug.js"></script>
    <script src="__STATIC__/qqFace/js/jquery.qqFace.js"></script>

      <!--    QQ表情-->
    <style>

        .qqFace { margin-top: -180px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
        .qqFace table td { padding: 0px; }
        .qqFace table td img { cursor: pointer; border: 1px #fff solid; }
        .qqFace table td img:hover { border: 1px #0066cc solid; }
    </style>

</head>
<body ontouchstart>
<div class='fui-page-group'>
<div class='fui-page chatDetail-page'>
    <div class="chat-header flex">
        <i class="icon icon-toleft t-48"></i>
        <span class="shop-titlte t-30">商店</span>
        <span class="shop-online t-26"></span>
        <span class="into-shop">进店</span> 
    </div>
    <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
        <div class="chat-content">
            <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
            <p class="chat-time"><span class="time">2020-04-30</span></p>
    </div>
    <div class="fix-send flex footer-bar">
        <i class="icon icon-emoji1 t-50"></i>
        <input class="send-input t-28" maxlength="200" id="saytext">
        <input type="file" name="pic" id="file" style="display: none">
        <i class="icon icon-add image_up t-50" style="color: #888;"></i>
        <span class="send-btn">发送</span>
    </div>
</div>
</div>

<script>

    // 来自哪里的id
    var fromid = {$fromid};
    //发送给谁的id
    var toid = {$toid};

    // 发送者的头像
    var from_head = '';
    //接收者的头像
    var to_head = '';

    //与谁聊天的昵称
    var to_name = '';

    //在线的状态默认为离线状态
    var online = 0;


    //发送请求
    var API_URL = "http://www.chat.com/index.php/api/chat/";

    // 消息提醒的测试
    var ws = new WebSocket("ws://127.0.0.1:8282");

    //加载linUx服务器上的信息
    // var ws = new WebSocket("ws://47.93.49.78:8282");



    ws.onmessage = function (e) {
       var message = eval("("+e.data+")");
       switch (message.type)
       {
           case "init":
               var bild = '{"type":"bind","fromid":"'+fromid+'"}';
               ws.send(bild);
               get_head(fromid, toid); //用户头像
               get_name(toid); //用户名称
               message_load(); //页面聊天信息展示
               var online = '{"type":"online","toid":"'+toid+'","fromid":"'+fromid+'"}'; //显示对方是否在线
               ws.send(online);
               changeNoRead();  //未读消息

               return;


           //接收者接收的信息
           case "text":
               if (toid == message.fromid){
               $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                   '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                   '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+replace_em(message.data)+'</span>\n' +
                   '        </div>');
                   $(".chat-content").scrollTop(3000);

                   changeNoRead();  //修改未读的信息
               }
               return;
           case "say_img":
               $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                   '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                   '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/'+message.img_name+'"></span>\n' +
                   '        </div>');
               $(".chat-content").scrollTop(3000);

               changeNoRead(); //修改未读的信息
               return;

           case "save":
                   save_message(message);
                   if (message.isread == 1){
                       online=1;
                       $(".shop-online").text("在线");
                   }else {
                       online=0;
                       $(".shop-online").text("离线");
                   }
                   return;

           case "online":
                   if (message.status==1){
                       online=1;
                       $(".shop-online").text("在线");
                   }else {
                       online=0;
                       $(".shop-online").text("离线");

                   }

       }
    }


   //发送者发送的信息
    $(".send-btn").click(function () {
        var text = $(".send-input").val();

        if (text==''){
            return;
        }

        var message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';
        $(".chat-content").append('    <div class="chat-text section-right flex">\n' +
            '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+replace_em(text)+'</span>\n' +
            '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
            '           </div>');

        $(".chat-content").scrollTop(3000);
        ws.send(message);
        $(".send-input").val(" ");
    })

    //获取聊天的信息 存储在数据库中
    function save_message(message) {

        $.post(

            API_URL+"save_message" ,
            message,

            function () {
            },'json'
        )

    }
    
    //改变未读消息
    function changeNoRead() {
        $.post(
            API_URL+"changeNoRead",
            {"fromid":fromid,"toid":toid},
            function () {

            },'json'
        )


    }
    
    
    
    

    //获取用户头像
    function get_head(fromid, toid) {

        $.post(

            API_URL+"get_head" ,
            {"fromid":fromid,"toid":toid},

            function (e) {
                from_head = e.from_head;
                to_head   =e.to_head;
            },'json'
        )
    }

    //获取聊天双方的名字
    function get_name(toid) {
        $.post(
            API_URL+"get_name",
            {"uid":toid},
            function (e) {
              to_name = e.toname;
              $(".shop-titlte").text("与"+to_name+"聊天中...");
            },'json'
        );
    }

    //聊天信息的展示
    function message_load() {
        $.post(
            API_URL+"load",
            {"fromid":fromid,"toid":toid},
            function (e) {
                $.each(e,function (index,content) {

                    if (fromid ==content.fromid){

                        if (content.type == 2){
                            $(".chat-content").append('    <div class="chat-text section-right flex">\n' +
                                '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/'+content.content+'"></span>\n' +
                                '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
                                '           </div>');
                        }else {
                            $(".chat-content").append('    <div class="chat-text section-right flex">\n' +
                                '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+replace_em(content.content)+'</span>\n' +
                                '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
                                '           </div>');
                        }
                    }else {
                        if (content.type == 2){
                            $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                                '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                                '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/'+content.content+'"></span>\n' +
                                '        </div>');
                        }else
                        {
                            $(".chat-content").append('<div class="chat-text section-left flex">\n' +
                                '            <span class="char-img" style="background-image: url('+to_head+')"></span>\n' +
                                '            <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+replace_em(content.content)+'</span>\n' +
                                '        </div>');
                        }
                    }
                });
                $(".chat-content").scrollTop(3000);

            },'json'
        );
    }



    // QQ表情点击事件
    $(function(){

        $('.icon-emoji1').qqFace({



            assign:'saytext',

            path:'__STATIC__/qqFace/arclist/'	//表情存放的路径

        });

        $(".sub_btn").click(function(){

            var str = $("#saytext").val();

            $("#show").html(replace_em(str));

        });

    });

    //查看结果（qq表情图片）

    function replace_em(str){

        str = str.replace(/\</g,'&lt;');

        str = str.replace(/\>/g,'&gt;');

        str = str.replace(/\n/g,'<br/>');

        str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/qqFace/arclist/$1.gif" border="0" />');

        return str;

    }



    //聊天选择图片 (点击事件)
    $(".image_up").click(function () {
        $("#file").click();
    })

    $("#file").change(function () {

        // console.log($("#file")[0].files);

        formdata = new FormData();
        formdata.append('fromid',fromid);
        formdata.append('toid',toid);
        formdata.append('online',online);
        formdata.append('file',$("#file")[0].files[0]);

        $.ajax({
            url:API_URL+"uploadimg",
            type:'POST',
            cache:false,//缓存
            data:formdata,//上传的数据的信息
            dataType:'json', // 上传前的json类型的文件
            processData:false, //
            contentType:false,//上传的文件的类型
            success:function (data,status,xhr) {
                console.log(data);

                  //发送的图片
                if (data.status=='ok') {
                    $(".chat-content").append('    <div class="chat-text section-right flex">\n' +
                        '            <span class="text"><i class="icon icon-sanjiao3 t-32"></i><img width="120em" height="120em" src="__ROOT__/uploads/'+data.img_name+'"></span>\n' +
                        '            <span class="char-img" style="background-image: url('+from_head+')"></span>\n' +
                        '           </div>');
                    $(".chat-content").scrollTop(3000);

                    var message = '{"data":"'+data.img_name+'","fromid":"'+fromid+'","toid":"'+toid+'","type":"say_img"}'
                    $("#file").val(""); //清空数据（图片上传后的显示）
                    ws.send(message);
                }else {
                    console.log(data.status);

                }
                }

        });

    })





</script>
</div>
</body>
</html>
